<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐扣游戏商城</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/shopcar.css">
</head>

<body>
    <!-- header模块-->
    <header>
        <div class="header-l">
            <a href="index.html">
                <img src="images/logo.png" alt="">
            </a>
        </div>
        <div class="header-r">
            <ul>
                <li>
                    <a href="index.html">商店</a>
                </li>
                <li>
                    <a href="community.html">社区</a>
                </li>
                <li>
                    <a href="ranking.html">排行榜</a>
                </li>
                <li>
                    <a href="javascript:;">客服</a>
                </li>
            </ul>
        </div>
        <div class="header-m">
            <a href="register.html"><button>注 册</button></a>

            <a href="login.html"><button>登 录</button></a>
        </div>
    </header>

    <!-- 结算模块 -->
    <div class="main">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label><input class="check-all check" type="checkbox" />&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="update/nba2023.jpg" alt="" /><span>NBA2K23</span></td>
                    <td class="price">199</td>
                    <td class="count">
                        <span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">199</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="update/total3.jpg" alt="" /><span>全面战争：三国</span></td>
                    <td class="price">268</td>
                    <td class="count"><span class="reduce"></span><input class="count-input" type="text"
                            value="1" /><span class="add">+</span></td>
                    <td class="subtotal">268</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="update/train3.jpg" alt="" /><span>模拟火车世界3</span></td>
                    <td class="price">116</td>
                    <td class="count"><span class="reduce"></span><input class="count-input" type="text"
                            value="1" /><span class="add">+</span></td>
                    <td class="subtotal">116</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="update/wuzhuyidi3.jpg" alt="" /><span>无主之地3</span></td>
                    <td class="price">199</td>
                    <td class="count"><span class="reduce"></span><input class="count-input" type="text"
                            value="1" /><span class="add">+</span></td>
                    <td class="subtotal">199</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="foot" id="foot">
        <label class="fl select-all"><input type="checkbox" class="check-all check" />&nbsp;全选</label>
        <a class="fl delete" id="deleteAll" href="javascript:;">删除</a>
        <div class="fr closing">结 算</div>
        <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
        <div class="fr selected" id="selected">已选商品
            <span id="selectedTotal">0</span>件
            <span class="arrow up">︽</span>
            <span class="arrow down">︾</span>
        </div>
        <div class="selected-view">
            <div id="selectedViewList" class="clearfix">
            </div>
            <span class="arrow">◆<span>◆</span></span>
        </div>
    </div>

    <!-- 底部模块 -->
    <footer>
        <div class="mod_copyright">
            <div class="links">
                <a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a
                    href="#">营销中心</a>
                |
                <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">游戏社区</a> |<a href="#">爱心公益</a>|
                <a href="#">English Site</a> | <a href="#">Contact U</a>
            </div>
            <div class="copyright">
                地址：嘉应学院江北校区东区学生宿舍 | 电话：13434940752 | 邮箱: 1960144768@qq.com <br>
            </div>
        </div>
    </footer>

    <script>
        window.onload = function () {
            if (!document.getElementsByClassName) {
                document.getElementsByClassName = function (cls) {
                    var ret = [];
                    var els = document.getElementsByTagName('*');
                    for (var i = 0, len = els.length; i < len; i++) {
                        if (els[i].className === cls
                            || els[i].className.indexOf(cls + ' ') >= 0
                            || els[i].className.indexOf(' ' + cls + ' ') >= 0
                            || els[i].className.indexOf(' ' + cls) >= 0) {
                            ret.push(els[i]);
                        }
                    }
                    return ret;
                }
            }

            var cartTable = document.getElementById('cartTable');
            var tr = cartTable.children[1].rows;
            var checkInputs = document.getElementsByClassName('check');
            var checkAllInputs = document.getElementsByClassName('check-all');
            var selectedTotal = document.getElementById('selectedTotal');
            var priceTotal = document.getElementById('priceTotal');
            var selected = document.getElementById('selected');
            var foot = document.getElementById('foot');
            var selectedViewList = document.getElementById('selectedViewList');
            var deleteAll = document.getElementById('deleteAll');

            //计算
            function getTotal() {
                var seleted = 0;
                var price = 0;
                var HTMLstr = '';
                for (var i = 0, len = tr.length; i < len; i++) {
                    if (tr[i].getElementsByTagName('input')[0].checked) {
                        tr[i].className = 'on';
                        seleted += parseInt(tr[i].getElementsByTagName('input')[1].value);
                        price += parseFloat(tr[i].cells[4].innerHTML);
                        HTMLstr += '<div><img src="' + tr[i].getElementsByTagName('img')[0].src + '"><span class="del" index="' + i + '">取消选择</span></div>'
                    }
                    else {
                        tr[i].className = '';
                    }
                }

                selectedTotal.innerHTML = seleted;
                priceTotal.innerHTML = price.toFixed(2);
                selectedViewList.innerHTML = HTMLstr;

                if (seleted == 0) {
                    foot.className = 'foot';
                }
            }

            //小计
            function getSubTotal(tr) {
                var tds = tr.cells;
                var price = parseFloat(tds[2].innerHTML);
                var count = parseInt(tr.getElementsByTagName('input')[1].value);
                var SubTotal = parseFloat(price * count);
                tds[4].innerHTML = SubTotal.toFixed(2);
            }

            for (var i = 0, len = checkInputs.length; i < len; i++) {
                checkInputs[i].onclick = function () {
                    if (this.className === 'check-all check') {
                        for (var j = 0; j < checkInputs.length; j++) {
                            checkInputs[j].checked = this.checked;
                        }
                    }
                    if (this.checked == false) {
                        for (var k = 0; k < checkAllInputs.length; k++) {
                            checkAllInputs[k].checked = false;
                        }
                    }
                    getTotal();
                }
            }

            selected.onclick = function () {
                if (foot.className == 'foot') {
                    if (selectedTotal.innerHTML != 0) {
                        foot.className = 'foot show';
                    }
                }
                else {
                    foot.className = 'foot';
                }
            }

            selectedViewList.onclick = function (e) {
                e = e || window.event;
                var el = e.srcElement;
                if (el.className == 'del') {
                    var index = el.getAttribute('index');
                    var input = tr[index].getElementsByTagName('input')[0];
                    input.checked = false;
                    input.onclick();
                }
            }

            for (var i = 0; i < tr.length; i++) {
                tr[i].onclick = function (e) {
                    e = e || window.event;
                    var el = e.srcElement;
                    var cls = el.className;
                    var input = this.getElementsByTagName('input')[1];
                    var val = parseInt(input.value);
                    var reduce = this.getElementsByTagName('span')[1];
                    switch (cls) {
                        case 'add':
                            input.value = val + 1;
                            reduce.innerHTML = '-';
                            getSubTotal(this);
                            break;
                        case 'reduce':
                            if (val > 1) {
                                input.value = val - 1;
                            }
                            if (input.value <= 1) {
                                reduce.innerHTML = '';
                            }
                            getSubTotal(this);
                            break;
                        case 'delete':
                            var conf = confirm('确定要删除吗？');
                            if (conf) {
                                this.parentNode.removeChild(this);
                            }
                            break
                        default:
                            break;
                    }
                    getTotal();
                }
                tr[i].getElementsByTagName('input')[1].onkeyup = function () {
                    var val = parseInt(this.value);
                    var tr = this.parentNode.parentNode
                    var reduce = tr.getElementsByTagName('span')[1];
                    if (isNaN(val) || val < 1) {
                        val = 1;
                    }
                    this.value = val;
                    if (val <= 1) {
                        reduce.innerHTML = '';
                    }
                    else {
                        reduce.innerHTML = '-';
                    }
                    getSubTotal(tr);
                    getTotal();
                }
            }

            deleteAll.onclick = function () {
                if (selectedTotal.innerHTML != '0') {
                    var conf = confirm('确定删除吗？');
                    if (conf) {
                        for (var i = 0; i < tr.length; i++) {
                            var input = tr[i].getElementsByTagName('input')[0];
                            if (input.checked) {
                                tr[i].parentNode.removeChild(tr[i]);
                                i--;
                            }
                        }
                    }
                }
            }

            checkAllInputs[0].checked = true;
            checkAllInputs[0].onclick();
        }


        var href = document.querySelector('.closing');
        href.onclick = function () {
            href.innerHTML = "结算中...";
            console.log(1);
            var time=2;
            setInterval(function(){
                if(time == 0){
                    location.href = './settlement.html';
                }else{
                    time--;
                }
            },1000)

        }
    </script>
</body>

</html>